<template>
    <div>
        <r-search :searchHandle="searchHandleAdd" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="false" :isIndex="true" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
        <r-form :formRules="formRulesEditPsw" :formHandle="formHandleEditPsw" :formData="formDataEditPsw" :formCols="formColsEditPsw" ref="elFormEditPsw" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        var checkpass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formDataEditPsw.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            searchData: {
                userName: '',
                phone: '',
                status: ''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'userName',
                    placeholder: '补货员名称',
                    width: 170
                },
                {
                    type: 'input',
                    prop: 'phone',
                    placeholder: '联系方式',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'status',
                    placeholder: '状态',
                    width: 150,
                    options: [
                        {
                            label: '正常',
                            value: '1'
                        },
                        {
                            label: '冻结',
                            value: '2',
                        },
                    ]
                },
            ],
            searchHandleAdd: [
                {
                    label: "新增补货人员",
                    type: "success",
                    icon: "el-icon-circle-plus-outline",
                    handle: e => this.elFormVisible()
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
                {}
            ],
            tableCols: [
                {
                    label: '补货员名称',
                    prop: 'userName',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '联系方式',
                    prop: 'phone'
                },
                {
                    label: '生鲜柜设备',
                    prop: 'eqNum'
                },
                {
                    label: '组合柜设备',
                    prop: 'cbNum'
                },
                {
                    label: '账号状态',
                    prop: 'status',
                    theme: e => e.state == '2' ? 'danger' : 'primary',
                    formatter: e => e.state == '2' ? '冻结' : '正常',
                    type: "tag",
                },
                {
                    label: '创建时间',
                    prop: 'ctime',
                    width: 160,
                    formatter: e => e.ctime && this.getDeta(+new Date(e.ctime.replace(/T/g, ' ')))
                },
                {
                    label: "操作",
                    type: "button",
                    width: 300,
                    btnList: [
                        {
                            label: '编辑',
                            type: 'primary',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.elFormDetail(row)
                        },
                        {
                            label: '删除',
                            type: 'primary',
                            handle: (row) => this.TableDel('/sys/replenish/delete', { id: row.id })
                        },
                        {
                            label: '修改密码',
                            type: 'primary',
                            handle: (row) => this.elFormDetailEditPsw(row)
                        },
                    ]
                },

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                userName: "",
                phone: "",
                password: "",
            },
            formCols: [
                { type: "input", label: "补货人员名称", placeholder: '请输入补货人员名称', width: 350, prop: "userName", },
                { type: "input", label: "联系方式", placeholder: '请输入联系方式', width: 350, prop: "phone", },
                { type: "input",isShow: () => {
                        return this.formData.id ? false : true
                    }, inputType: 'password', label: " 密码", placeholder: '请输入密码', width: 350, prop: "password" },
            ],
            formRules: {
                userName: [{ required: true, message: '补货人员名称', trigger: 'blur' },],
                phone: [{ required: true, message: '联系方式', trigger: 'blur' },],
                password: [{ required: true, message: '密码', trigger: 'blur' }],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],
            //密码
            formDataEditPsw: {
                password: "",
                enterPassword: "",
            },
            formColsEditPsw: [
                { type: "input", inputType: 'password', label: " 密码", placeholder: '请输入密码', width: 350, prop: "password" },
                { type: "input", inputType: 'password', label: "确认密码", placeholder: '请输入确认密码', width: 350, prop: "enterPassword" },
            ],
            formRulesEditPsw: {

                password: [
                    { required: true, message: '密码', trigger: 'blur' },
                ],
                // enterPassword: [
                //     {
                //         required: true, message: '两次输入密码不一致', trigger: 'blur',
                //         validator: checkpass
                //     },
                // ],
            },
            formHandleEditPsw: [
                {
                    label: "取消",
                    handle: e => this.elFormVisibleEditPsw(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmitEditPsw(),
                },

            ],


        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.tablePage.offset = this.tablePage.page
            let param = { ...this.searchData, ...this.tablePage }
            // console.log(param);
            let res = await this.api.replenish(param)
            if (res) {
                this.tablePage.total = res.data.total
                this.tableData = res.data.list
            }
        },
        async elFormSubmit() {
            if (this.formData.id) {
                this.formData.account = this.formData.phone
                let res = await this.api.replenishupdate(this.formData)
                if (res) {
                    this.formData.id = ''
                    this.elFormVisible()
                    this.init()
                }
            } else {
                this.formData.account = this.formData.phone
                let res = await this.api.replenishadd(this.formData)
                if (res) {
                    this.elFormVisible()
                    this.init()
                }
            }

        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            this.formData.password = undefined
            // delete this.formData.password;
            this.elFormVisible()
        },
        elFormDetailEditPsw(row) {
            Object.keys(this.formDataEditPsw).forEach(key => {
                this.formDataEditPsw[key] = row[key]
            })
            this.formDataEditPsw.id = row.id
            this.formDataEditPsw.userName = row.userName
            this.formDataEditPsw.phone = row.phone
            this.formDataEditPsw.account = row.account
            this.formDataEditPsw.password = ''
            this.elFormVisibleEditPsw()
        },
        elFormVisibleEditPsw(tit) {
            if (this.$refs.elFormEditPsw.$refs.ruleFormEditPsw) {
                this.$refs.elFormEditPsw.$refs.ruleFormEditPsw.resetFields()
                this.$data.formDataEditPsw = this.$options.data.call(this).formDataEditPsw;
            }
            this.$refs.elFormEditPsw.dialogFormVisible = !this.$refs.elFormEditPsw.dialogFormVisible
            this.$refs.elFormEditPsw.dialogFormTitle = tit ? tit : this.formDataEditPsw.id ? '编辑' : '新增'

            if (this.$refs.elFormEditPsw.dialogFormVisible) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000)
                })
            }

        },
        async elFormSubmitEditPsw() {
            let res = await this.api.replenishupdate(this.formDataEditPsw)
            if (res) {
                this.formData.id = ''
                this.elFormVisibleEditPsw()
                this.init()
            }
        },
        //冻结禁用
        elFormDetailActive(row) {
            Object.keys(this.formDataActive).forEach(key => {
                this.formDataActive[key] = row[key]
            })
            this.formDataActive.id = row.id;
            this.elFormVisibleActive()
        },
        elFormVisibleActive(tit) {
            if (this.$refs.elFormActive.$refs.ruleFormActive) {
                this.$refs.elFormActive.$refs.ruleFormActive.resetFields()
                this.$data.formDataActive = this.$options.data.call(this).formDataActive;
            }
            this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive.dialogFormVisible
            this.$refs.elFormActive.dialogFormTitle = tit ? tit : this.formDataActive.id ? '编辑' : '新增'

            if (this.$refs.elFormActive.dialogFormVisible) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000)
                })
            }

        },
        async elFormSubmitActive() {
            let res = await this.api.opstate(this.formDataActive)
            if (res) {
                this.elFormVisibleActive()
                this.init()
            }
        }
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
